<template>
  <page-layout title="缴纳主体">
    <div class="contract-management">
      <a-row type="flex" justify="center" align="middle">
        <a-col :span="8">
          <a-form layout="inline">
            <a-form-item label="主体">
              <a-input style="width:220px" v-model="searchState.keyword" placeholder="请输入主体名称" allow-clear>
                <a-icon slot="prefix" type="user" />
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" icon="search" @click="onSearch">查询</a-button>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="4" :offset="12" style="text-align:right;">
          <a-button type="primary" icon="plus" @click="onCreate">新建缴纳主体</a-button>
        </a-col>
      </a-row>
      <a-table class="contract-table" rowKey="id" :columns="columns" :data-source="dataSource" :scroll="{x:true}" :pagination="{
                    current: searchState.page,
                    pageSize: searchState.size,
                    total: searchState.total,
                    showLessItems: true,
                    onChange: onPageChange,
                    onShowSizeChange: onSizeChange,
                }">
        >
        <template slot="operation" slot-scope="text, record">
          <a class="ant-dropdown-link" @click="onEdit(record)">编辑</a>
        </template>
      </a-table>
      <!-- 新增/编辑缴纳主体 -->
      <createModal :visible="isVisible" :type="type" @cancelModal="cancelModal"></createModal>
    </div>
  </page-layout>
</template>

<script>
import PageLayout from '@/layouts/PageLayout';
import createModal from './modal/createPayPrincipal.vue'
export default {
  name: 'payPrincipal',
  components: { PageLayout, createModal },
  data () {
    return {
      columns: [
        {
          title: '缴纳主体',
          dataIndex: 'templateName',
          width: 200,
          fixed: 'left',
          scopedSlots: { customRender: 'templateName' },
        },
        {
          title: '报税区域',
          dataIndex: 'id',
          scopedSlots: { customRender: 'id' },
        },
        {
          title: '登录账号',
          dataIndex: 'projectBaseName',
          scopedSlots: { customRender: 'projectBaseName' },
        },
        {
          title: '负责财务',
          dataIndex: 'createBy',
          scopedSlots: { customRender: 'createBy' },
        },
        {
          title: '更新时间',
          dataIndex: 'createTime',
          scopedSlots: { customRender: 'createTime' },
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: 100,
          fixed: 'right',
          scopedSlots: { customRender: 'operation' },
        },
      ],
      dataSource: [{}, {}],
      searchState: {
        keyword: '',
        page: 1,
        size: 10,
        total: 0,
      },
      type: 0,
      isVisible: false
    };
  },
  methods: {
    onSearch () {
      console.log(this.searchState);
    },
    onCreate () {
      this.type = 0;
      this.isVisible = true;
    },
    onEdit (item) {
      this.type = 1;
      this.isVisible = true;
      console.log(item);
    },
    cancelModal (result) {
      let { success, data } = result;
      if (success === 'ok') {
        console.log(data);
      }
      this.isVisible = false;
    },
    /**
     * @description: 分页
     * @param {*} page
     * @param {*} pageSize
     * @return {*}
     */
    onPageChange (page, pageSize) {
      this.searchState.page = page;
      this.searchState.size = pageSize;
    },
    onSizeChange (current, size) {
      this.searchState.page = 1;
      this.searchState.size = size;
    },
  },
  mounted () {
  },
};
</script>

<style scoped lang="less">
.contract-management {
  background: #fff;
  padding: 24px;
  .contract-table {
    margin-top: 24px;
  }
  /deep/.ant-table td {
    white-space: nowrap;
  }
}
</style>
